<template>
  <el-dialog :title="isEdit?'编辑仓库作业点':'新增仓库作业点'"
             :visible.sync="dialogForm"
             width="1100px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             :rules="rules"
             class="add-form"
             label-width="110px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="所属单位"
                        prop="orgId">
            <auto-search-org v-model="form.orgId"
                             @select="v=>{form.orgId=v;form.deptId='';form.deptName='';}"
                             @selectName="v=>form.orgName=v"
                             :disabled="true"
                             :name="form.orgName"></auto-search-org>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属仓库"
                        prop="warehouseName">
            <el-select v-model="form.warehouseName"
                       placeholder="请选择"
                       disabled>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属库房"
                        prop="roomName">
            <el-select v-model="form.roomName"
                       placeholder="请选择"
                       disabled>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="sub-title">作业点信息</div>
          <el-table :data="form.jobPoints"
                    border
                    stripe
                    max-height="500">
            <el-table-column label="序号"
                             min-width="50">
              <template slot-scope="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column prop="name"
                             label="作业点名称"
                             min-width="120">
              <template slot-scope="scope">
                <el-row>
                  <el-col :span="18">
                    <el-input :controls="false"
                              v-model="scope.row.name"
                              :disabled="!form.lineNo"></el-input>
                  </el-col>
                  <el-col :span="6">
                    <i class="el-icon-search"
                       @click="handleDialogFormOpen(scope.row)"
                       style="margin-left:10px;cursor:pointer"></i>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column prop="code"
                             label="作业点编号"
                             min-width="120">
              <template slot-scope="scope">
                <el-input :controls="false"
                          v-model="scope.row.code"
                          :disabled="!form.lineNo"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="startSpan"
                             label="开始跨数"
                             min-width="140">
              <template slot-scope="scope">
                <!-- :max="scope.row.endParkingLot?scope.row.endParkingLot:maxLot" -->
                <el-input :controls="false"
                          v-model="scope.row.startSpan"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="endSpan"
                             label="结束跨数"
                             min-width="140">
              <template slot-scope="scope">
                <!-- :max="maxLot" -->
                <el-input :controls="false"
                          v-model="scope.row.endSpan"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="startAula"
                             label="开始间数"
                             min-width="140">
              <template slot-scope="scope">
                <!-- :max="scope.row.endParkingLot?scope.row.endParkingLot:maxLot" -->
                <el-input :controls="false"
                          v-model="scope.row.startAula"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="endAula"
                             label="结束间数"
                             min-width="140">
              <template slot-scope="scope">
                <!-- :max="maxLot" -->
                <el-input :controls="false"
                          v-model="scope.row.endAula"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remark"
                             label="备注"
                             min-width="140">
              <template slot-scope="scope">
                <el-input type="textarea"
                          :rows="1"
                          style="width: 188px"
                          :maxLength="$maxLength"
                          v-model="scope.row.remark"></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right"
                             align="center"
                             label="操作"
                             width="100">
              <template slot-scope="scope">
                <el-button size="small"
                           type="text"
                           @click="handleCopy(scope.row)">
                  复制
                </el-button>
                <el-button type="text"
                           class="danger"
                           size="small"
                           @click="handleRemove(scope.$index)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <work-point ref="workPoint"></work-point>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { getWarehouseList } from '@/api/adminWarehouse/adminWarehouse' //所属仓库来源于管辖仓库
import { getStorageSetList } from '@/api/storageSet/storageSet' //仓库作业点设置左边表格  所属库房来源于库房设置
import {
  addWarehousePoint,
  updateWarehousePoint
} from '@/api/warehouseOperationPoint/warehouseOperationPoint'
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import searchDept from '@/components/autocomplete/autoSearchDept'
import autoSearchLine from '@/components/autocomplete/autoSearchLine'
import autoSearchResource from '@/components/autocomplete/autoSearchResource'
import workPoint from './workPointForm'
import { PUBLIC_NUMBER_NULL } from '@/utils/Reg'
import { maxLength, sortLength } from '@/utils/rules'

export default {
  name: 'roleForm',
  components: {
    autoSearchOrg,
    searchDept,
    autoSearchLine,
    autoSearchResource,
    workPoint
  },
  data() {
    return {
      form: this.clearForm(),
      rules: {
        //   startSpan: [
        //     { required: true, validator: PUBLIC_NUMBER, trigger: 'blur' },
        //     sortLength
        //   ],
        //   endSpan: [
        //     { required: true, validator: PUBLIC_NUMBER, trigger: 'blur' },
        //     sortLength
        //   ],
        //   startAula: [
        //     { required: true, validator: PUBLIC_NUMBER, trigger: 'blur' },
        //     sortLength
        //   ],
        //   endAula: [
        //     { required: true, validator: PUBLIC_NUMBER, trigger: 'blur' },
        //     sortLength
        //   ],
        //   remark: [maxLength]
      },
      dialogForm: false,
      isEdit: false,
      maxLot: 100,
      checkList: [''],
      condition: {},
      selectrows: null,
      fatherRow: null
    }
  },
  methods: {
    clearForm() {
      return {
        id: '',
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name,
        jobPoints: [
          {
            id: '',
            name: '',
            code: '',
            startSpan: '',
            endSpan: '',
            startAula: '',
            endAula: '',
            remark: ''
          }
        ]
      }
    },
    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleToEdit() : this.handleToAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    // 新增
    handleToAdd() {
      addWarehousePoint(this.form.id, this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    //编辑选中的行数
    selectRow(item, farow) {
      this.selectrows = item
      this.fatherRow = farow
    },
    // 编辑
    handleToEdit() {
      updateWarehousePoint(this.fatherRow.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    handleRemove(index) {
      this.form.jobPoints.splice(index, 1)
    },
    handleCopy(item) {
      this.form.jobPoints.push({
        id: '',
        name: '',
        code: '',
        startSpan: '',
        endSpan: '',
        startAula: '',
        endAula: '',
        remark: ''
      })
    },
    handleDialogFormOpen(row) {
      this.$refs.workPoint.recRowData(row)
      this.$refs.workPoint.dialogForm = true
    },
    rectRow(row) {
      this.form.id = row.id
      this.form.warehouseName = row.warehouseName
      this.form.roomName = row.roomName
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<style scoped>
</style>
